<template>
  <div class="home">
    <div class="home_background" :style="{'background-image':`url(${config.IndexImage})`}"></div>
    <div class="home_login_content">
      <div class="login_form">
        <div class="login_main">
              <div class="login_title" v-t="'message.login.creatAccount'"></div>
              <el-form ref="ruleForm" :label-position="labelPosition" label-width="80px" :model="form" size="large" :rules="rules">
                <el-row :gutter="10">
                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="uname" :label="$t('message.personal.passportNo')" style="margin-bottom: 15px">
                      <el-input v-model="form.uname" :placeholder="$t('message.plsInput',{name:$t('message.personal.passportNo')})"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--确认护照号-->
                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="qrpassport" :label="$t('message.application.qrpassportNo')" style="margin-bottom: 15px">
                      <el-input v-model="form.qrpassport" onpaste="return false" oncopy="return false" oncut="return false" :placeholder="$t('message.plsInput',{name:$t('message.application.qrpassportNo')})"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="upwd" :label="$t('message.login.password')" style="margin-bottom: 15px">
                      <el-input type="password" v-model="form.upwd" :placeholder="$t('message.plsInput',{name:$t('message.login.password')})"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="email" :label="$t('message.login.email')" required style="margin-bottom: 15px">
                      <el-input v-model="form.email" :placeholder="$t('message.plsInput',{name:$t('message.login.email')})"></el-input>
                    </el-form-item>
                  </el-col>

                  <!-- <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="givenname" :label="$t('message.application.givenName')">
                      <el-input v-model="form.givenname" :placeholder="$t('message.plsInput',{name:$t('message.application.givenName')})"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="familyname" :label="$t('message.application.surname')">
                      <el-input v-model="form.familyname" :placeholder="$t('message.plsInput',{name:$t('message.application.surname')})"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="passport" :label="$t('message.application.passportNo')">
                      <el-input v-model="form.passport" :placeholder="$t('message.plsInput',{name:$t('message.application.passportNo')})"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="nationality" :label="$t('message.application.nationality')">
                        <el-select v-model="form.nationality" filterable :placeholder="$t('message.plsSelect',{name:$t('message.application.nationality')})">
                            <el-option
                                  v-for="item in selectList['nationality']"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                            </el-option>
                        </el-select>
                      </el-form-item>
                  </el-col> -->

                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="code" :label="$t('message.login.code')" required style="margin-bottom: 15px">
                        <el-input  prefix-icon="el-icon-lock" style="width:280px" v-model="form.code" :placeholder="$t('message.plsInput',{name:$t('message.login.code')})"></el-input>
                        <div class="code_info" @click="refreshCode" v-html="codeImg"></div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="text-align:center">
                    <el-button size="small" @click="goBack">{{$t('message.btnBack')}}</el-button>
                    <el-button size="small" type="primary" :loading="loading" @click="onSubmit">{{$t('message.btnSign')}}</el-button>
                  </div>
              </el-form>
            </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import config from '@/baseconfig.js'
export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  computed:{
    config(){
      return config
    }
  },
  data() {
    var mailPass = (rule, value, callback) => {
        const mailReg = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
        if (!value) {
          return callback(new Error(this.$t('message.cantEmpty')));
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error(this.$t('message.login.mailPassTips')))
          }
        }, 500);
    };
    var passWord = (rule,value,callback) => {
      // var rules = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[\W]).{8,30}$/;
      var rules = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/;
      if (!value) {
          return callback(new Error(this.$t('message.cantEmpty')));
      }else{
        if(!rules.test(value)){
          return callback(new Error(this.$t('message.passwordTips')));
        }else{
          callback()
        }
      }
    };
    return {
      labelPosition:'top',
      loading:false,
      form: {
        uname: "",
        upwd: "",
        qrpassport: "",
        email:"",
        code:'',
        // familyname:"",
        // givenname:"",
        // passport:"",
        // nationality:""
      },
      codeImg:"",
      noticeList:[],
      selectList:[],
      rules: {
        uname: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "blur" },
        ],
        qrpassport: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "blur" },
        ],
        upwd: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "blur" },
          { validator: passWord, trigger: 'blur' },
        ],
        email: [
          { validator: mailPass },
        ],
        familyname: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "blur" },
        ],
        givenname: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "blur" },
        ],
        passport: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "blur" },
        ],
        nationality: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "blur" },
        ],
        code: [
          { required: true, message: this.$t('message.cantEmpty'), },
        ]
      },
    };
  },
  mounted() {
    if(this.$store.state.hasLogin){
      this.$router.push({ path: "/index" });
    }
  },
  created(){
    this.getCode();
    //this.getAttribute()
  },
  methods: {
    refreshCode(){
      this.getCode()
    },
    getAttribute(){
      let that = this;
      that.$api.get('/reckon/getParameterList',{
        ptypes:'nationality'
      }).then(res=>{
        that.selectList = res
      }).catch(e=>{})
    },
    getCode(){
      this.$api.post('/reckon/getCode',{}).then(res=>{
        this.codeImg = res.data
      }).catch(e=>{})
    },
    goBack(){
      this.$router.go(-1)
    },
    onSubmit() {
      let that = this;
      that.uname = this.form.uname;
      that.qrpassport = this.form.qrpassport;
      if (that.uname==that.qrpassport){
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$api
              .post("/reckon/signAccount", {...this.form})
              .then((res) => {
                this.loading = false;
                this.$alert(this.$t('message.login.zhzccg'), this.$t('message.nat.czcg'), {
                  confirmButtonText: this.$t('message.btnConfirm'),
                  type:'success',
                  closeOnClickModal:false,
                  callback: action => {
                    this.$router.replace({name:'login'})
                  }
                });
              })
              .catch((e) => {this.loading = false;this.getCode()});
          } else {
            return false;
          }
        });
      }else {
        this.$message.error({message:this.$t('message.qrpassporttip'),type:'error'})
      }

    },
  },
};
</script>
<style lang="stylus" scoped>
.home
  display flex
  align-items: center
  justify-content: center
  min-height calc(100vh - 126px)
  .home_background
    position:absolute
    top 0
    bottom 0
    left 0
    right 0
    background-size cover
    background-position center
    background-repeat no-repeat
  .home_login_content
    position: relative

    .login_form
      margin 0 auto
      padding 10px 30px 10px 30px
      background-color rgba(255, 255, 255, 0.9)
      border-radius 20px
      width 480px
      .login_main
        padding 0 30px 0 20px
        box-sizing border-box
        .code_info
          position absolute
          right 0
          top 0
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0
          /*margin-bottom 10px*/
        >>>.el-button
          width 100px
        >>>.el-select
          display block
        >>>.el-form--label-top .el-form-item__label
          padding 0
          font-weight 600
        .link
          display block
          text-align center
          height $titleSize
          line-height $titleSize
          color $darkblack
      .login_meg
        width 500px
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0


</style>
